import React, { Fragment, useState } from 'react';
import {
  Button,
  Card,
  Content,
  DatePicker,
  Justify,
  Tab,
  Table,
  WithContext,
} from 'react-fule-ui';
import { createHashHistory } from 'history';
const history = createHashHistory();
// 默认开始时间
const dateValue = '2020-02-01';

// 合并成数组数据
const allWithData = (item, categories) => {
  const withData = Object.keys(item).map((id) => {
    item[id].category = categories[item[id].cid];
    return item[id];
  });
  return withData;
};

function Home(props) {
  const { data, actions } = props;
  const { items, categories } = data;
  let newdateValue = null;
  console.log(data);
  // 合并成数组数据
  let withData = allWithData(items, categories);
  const [showData, steShowData] = useState(withData);

  // 日期date
  const [age, month, day] = dateValue.split('-');
  const [dateFilter, setDateFilter] = useState(`${age}-${month}-${day}`);
  console.log(dateFilter);
  // 点击 - 删除数据
  const deletItem = (item) => {
    actions.deletItem(item);
    withData = allWithData(items, categories);
    steShowData(withData);
  };
  // 点击 - 修改数据
  const modifyItem = (item) => {
    history.push(`/Pages/Bookkeeping/Edit?=${item.id}`);
  };
  // 点击 - 添加数据
  const creatItem = () => {
    history.push('/Pages/Bookkeeping/Edit');
  };

  // 点击 - 筛选年月
  const changDate = (year, mounth, day) => {
    newdateValue = `${year}-${mounth}-${day}`;
    setDateFilter(newdateValue);
  };
  return (
    <Content>
      <Content.Header ceiling>记账页面</Content.Header>
      <Content.Body>
        <Tab ceiling>
          <Tab.TabPane label="列表模式" index="0">
            <Justify
              left={
                <Fragment>
                  <Button
                    type="button"
                    primary
                    style={{ marginRight: 12 }}
                    onClick={creatItem}
                  >
                    添加
                  </Button>
                  <span className="fule-datePickers">
                    <DatePicker
                      defaultValue={dateValue}
                      starAge="2020"
                      endAge="2028"
                      startMonth="1"
                      endMonth="12"
                      onChange={changDate}
                      size="s"
                    ></DatePicker>
                    <span style={{ marginLeft: 8, marginRight: 8 }}>到</span>
                    <DatePicker
                      defaultValue="2020-02-01"
                      starAge="2020"
                      endAge="2028"
                      startMonth="1"
                      endMonth="12"
                      size="s"
                    ></DatePicker>
                  </span>
                </Fragment>
              }
            ></Justify>
            <Card>
              <Table
                className="fule-table"
                records={showData}
                columns={[
                  {
                    key: 'title',
                    header: '支出事件',
                    render: (data) => (
                      <Fragment>
                        <div>{data.title}</div>
                      </Fragment>
                    ),
                  },
                  {
                    key: 'pay',
                    header: '支出数值',
                    render: (data) => (
                      <Fragment>
                        <strong>{data.pay}</strong>
                      </Fragment>
                    ),
                  },
                  {
                    key: 'time',
                    header: '时间',
                    render: (data) => (
                      <Fragment>
                        <div>{data.time}</div>
                      </Fragment>
                    ),
                  },
                  {
                    key: 'op',
                    width: '120',
                    header: '操作',
                    render: (data) => (
                      <Fragment>
                        <Button
                          type="link"
                          empty
                          primary
                          onClick={() => {
                            modifyItem(data);
                          }}
                        >
                          编辑
                        </Button>
                        <Button
                          type="link"
                          empty
                          primary
                          onClick={() => {
                            deletItem(data);
                          }}
                        >
                          删除
                        </Button>
                      </Fragment>
                    ),
                  },
                ]}
              />
            </Card>
          </Tab.TabPane>
          <Tab.TabPane label="图文模式" index="1">
            图文模式
          </Tab.TabPane>
        </Tab>
      </Content.Body>
    </Content>
  );
}
export default WithContext(Home);
